<template>
  <div class="shoppingcart">
    <!--Tips组件-->
    <Tips />
    <!--商品展示-->
    <div class="swipelist">
      <div class="swipe" v-for="cart in cartList" :key="cart.id">
        <van-checkbox-group v-model="result" :disabled="show">
          <van-checkbox :name="cart.id" @click="getgoodsTogglestate(cart)">
            <div class="cell">
              <van-swipe-cell>
                <van-card :num="cart.number" :price="cart.retail_price" :title="cart.goods_name" class="goods-card" :thumb="cart.list_pic_url" />
                <div class="stepper">
                  <van-stepper v-model="cart.number" v-show="stepper==2" @change="getstepper(cart.goods_id,cart.id,cart.number,cart.product_id)" />
                </div>
                <template #right>
                  <van-button square text="删除" type="danger" class="delete-button" @click="getdelete(cart.product_id)" />
                </template>
              </van-swipe-cell>
            </div>
          </van-checkbox>
        </van-checkbox-group>
      </div>
    </div>
    <!--底部提交栏-->
    <van-submit-bar :price="price" button-text="提交订单" @submit="onSubmit" class="submit">
      <van-checkbox v-model="checkedAll" :disabled="show">全选</van-checkbox>
      <template #tip>
        累计共{{num}}件商品点击, <span @click="onClickEditAddress">
          <van-tag type="success" v-if="!show" @click="getshow" size="large">编辑</van-tag>
          <van-tag type="danger" v-else @click="getshow" size="large">完成编辑</van-tag>
        </span>
        修改商品数量
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import Tips from '@/components/Tips.vue'
import { Toast } from 'vant'
export default {
  name: 'cart',
  data() {
    return {
      checked: false,
      //编辑与完成编辑的切换
      show: false,
      //步进器
      value: 1,
      //复选框
      checked: true,
      //是否显示步进器
      stepper: 1,
      //商品的数量
      num: '',
      //商品的价格
      price: 0,
      //商品的标题
      title: '',
      //购物车数据
      cartList: [],
      result: []
    }
  },
  computed: {
    checkedAll: {
      get() {
        return this.result.length == this.cartList.length
      },
      set(val) {
        let ids_arr = []
        this.cartList.map(item => {
          ids_arr.push(item.product_id)
        })
        let isChecked = val ? 1 : 0
        let productIds = ids_arr.join()
        this.$store.dispatch('getSelectedstateList', { isChecked, productIds })
        setTimeout(() => {
          this.cartList = this.$store.state.login.SelectedstateList.cartList
          this.num = this.$store.state.login.SelectedstateList.cartTotal.checkedGoodsCount
          this.price = this.$store.state.login.SelectedstateList.cartTotal.checkedGoodsAmount * 100
          // 处理复选框
          this.result = []
          this.cartList.map(item => {
            item.checked == 1 ? this.result.push(item.id) : ''
          })
        }, 200)
      }
    }
  },
  components: {
    Tips
  },
  mounted() {
    this.getShoppingcartList()
  },
  methods: {
    onSubmit() {
      Toast('该功能未开发！敬请期待')
    },
    onClickEditAddress() {},
    //改变编辑与完成编辑的切换
    getshow() {
      if (this.show) {
        this.show = !this.show
      } else {
        this.show = !this.show
      }
      //步进器的切换和复选框的禁用
      if (this.stepper == 1) {
        this.stepper = 2
      } else {
        this.stepper = 1
      }
    },
    getShoppingcartList() {
      this.$store.dispatch('getShoppingcartList')
      setTimeout(() => {
        this.cartList = this.$store.state.login.ShoppingcartList.cartList
        this.num = this.$store.state.login.ShoppingcartList.cartTotal.checkedGoodsCount
        this.price = this.$store.state.login.ShoppingcartList.cartTotal.checkedGoodsAmount * 100
        // 处理复选框
        this.cartList.map(item => {
          item.checked == 1 ? this.result.push(item.id) : ''
        })
      }, 300)
    },
    //步进器
    getstepper(goodsId, id, number, productId) {
      this.$store.dispatch('getCommoditystepperList', { goodsId: goodsId, id: id, number: number, productId: productId })
      setTimeout(() => {
        this.num = this.$store.state.login.GoodsAmount.checkedGoodsCount
        this.price = this.$store.state.login.GoodsAmount.checkedGoodsAmount * 100
      }, 300)
    },
    //点击删除按钮
    getdelete(productIds) {
      this.$store.dispatch('getDeletecommodityList', { productIds })
      Toast('删除成功')
      setTimeout(() => {
        this.cartList = this.$store.state.login.commodityList.cartList
        this.num = this.$store.state.login.commodityList.cartTotal.checkedGoodsCount
        this.price = this.$store.state.login.commodityList.cartTotal.checkedGoodsAmount * 100
      }, 300)
    },
    //切换选中状态
    getgoodsTogglestate(cart) {
      let isChecked = cart.checked == 0 ? 1 : 0
      let productIds = cart.product_id
      this.$store.dispatch('getSelectedstateList', { isChecked, productIds })
      setTimeout(() => {
        this.cartList = this.$store.state.login.SelectedstateList.cartList
        this.num = this.$store.state.login.SelectedstateList.cartTotal.checkedGoodsCount
        this.price = this.$store.state.login.SelectedstateList.cartTotal.checkedGoodsAmount * 100
        // 处理复选框
        this.result = []
        this.cartList.map(item => {
          item.checked == 1 ? this.result.push(item.id) : ''
        })
      }, 500)
    }
  }
}
</script>

<style lang="less" scoped>
.shoppingcart {
  .swipelist {
    .swipe {
      background-color: #fff;
      border-bottom: 0.02rem solid #e5e5e5;
      /deep/.van-checkbox__label {
        flex: 1;
      }
      .van-checkbox-group {
        .van-checkbox {
          padding: 0.1rem 0.15rem;
          border-bottom: 1px solid #ccc;
        }
      }
      .cell {
        .stepper {
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }

  .submit {
    margin-bottom: 13%;
  }
}
</style>
<style>
.goods-card {
  margin: 0;
  background-color: #fff;
}

.delete-button {
  height: 100%;
}
</style>